<template>
  <div class="subject">
    <span>{{ subjectObj.num1 }}</span>
    <span>+</span>
    <span>{{ subjectObj.num2 }}</span>
    <span>=</span>
    <input type="number" v-model.number="num"/>
    <button @click="submit" :disabled="subjectObj.isDone">提交</button>
  </div>
</template>

<script>
export default {
  // props: ['subjectObj']
  data() {
    return {
      num: ''
    }
  },
  props: {
    // 父传子的题目对象
    subjectObj: {
      type: Object,
      required: true
    },
    i: Number
  },
  methods: {
    // 提交
    submit() {
      // 1. 设置完成状态
      // this.subjectObj.isDone = true
      // 2.结果正确还是错误的判断
      // this.subjectObj.isRight = this.subjectObj.answer === this.num
      this.$emit('update', {
        index: this.i,
        result: this.subjectObj.answer === this.num
      })
    }
  }
};
</script>

<style scoped>
.subject {
  margin: 5px;
  padding: 5px;
  font-size: 20px;
}
.subject span {
  display: inline-block;
  text-align: center;
  width: 20px;
}
.subject input {
  width: 50px;
  height: 20px;
}
</style>